<template>
  <div>
    <header-m></header-m>
    <div class="zhao" v-show="isShow"></div>
    <ticket-buy v-show="isShow" @chuan="shou"></ticket-buy>
    <div class="bossIn-btm" v-if="this.$store.state.isOnline">
      <ul v-if="tickets.length">
        <li v-for="(item,index) in tickets" :key="index">
          <div>
            <img :src="item.verticalPic" />
            <h1>
              {{item.name}}
              <small>{{item.address}}</small>
              <span @click="detail(item.id)">查看演出详情</span>
              <span @click="look(item.id)">查看票详情</span>
            </h1>
          </div>
        </li>
      </ul>
      <div v-else>
        <img width="100%"  src="../assets/images/k.png" >
      </div>
    </div>
    <div class="stop" v-else @click="login">点此登录查看</div>
  </div>
</template>
<script>
import ticketBuy from "../components/tickets";
import headerM from "../components/HeaderM";
export default {
  data() {
    return {
      tickets: [],
      isShow: false,
    };
  },
  components: {
    headerM,
    ticketBuy,
  },
  methods: {
    detail(val){
      this.$store.commit('setId',val)
      location.href="#/detail"
    },
    back() {
      history.go(-1);
    },
    login() {
      location.href = "#/login";
    },
    look(val) {
      this.$store.commit("setId", val);
      $(document.body).css({
        "overflow-x": "hidden",
        "overflow-y": "hidden",
      });
      this.isShow = true;
      this.axios
        .get(
          "/ticket?userid=" +
            this.$store.state.userId +
            "&perid=" +
            this.$store.state.id
        )
        .then((res) => {
          this.$store.commit('myTickets',res.data.result)
        });
    },
    shou(val) {
        this.isShow = val;
      
    },
    show(){
         if (this.$store.state.isOnline) {
      this.axios.get("/car?userid=" + this.$store.state.userId).then((res) => {
        this.tickets = res.data.result;
        // 去重
        let obj = {};
        this.tickets = this.tickets.reduce((cur, next) => {
          obj[next.id] ? "" : (obj[next.id] = true && cur.push(next));
          return cur;
        }, []);
        console.log(this.tickets)
      });
    }
    }
  },
  mounted() {
     this.show();
  },
};
</script>
<style scoped>
.zhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5);
}
/* 顶部 */
.head {
  width: 100%;
  height: 60px;
  background-color: deeppink;
  font-size: 20px;
  line-height: 60px;
  color: white;
}

.head i {
  float: left;
  margin-top: 13px;
}
/* 返回按钮 */
.el-icon-arrow-left {
  font-size: 30px;
  color: white;
}
/* 订单 */
.bossIn-btm {
  width: 100%;
  overflow: scroll;
  position: relative;
  /* border: 1px solid #dddddd; */
  margin-bottom: 15px;
}

.bossIn-btm ul li div {
  display: flex;
  padding: 20px 0;
}
.bossIn-btm ul li div img {
  width: 25%;
  border-radius: 0;
  margin-left: 20px;
}
.bossIn-btm ul li div h1 {
  text-align: left;
  font-size: 19px;
  font-weight: normal;
  margin: 8px 0 0 8px;
}
.bossIn-btm ul li div h1 small {
  display: block;
  font-size: 12px;
  width: 200px;
  color: #999;
}
.bossIn-btm ul li div span {
  text-align: center;
  display: block;
  margin: 5px auto 0;
  padding: 7px 10px 0 10px;
  border: solid 1px #ff1268;
  height: 35px;
  border-radius: 20px;
  color: #ff1268;
  font-size: 18px;
  width: 50vw;
}

.stop {
  margin-top: 20px;
  color: dimgray;
  box-shadow: 1px 1px 1px 1px deepskyblue;
}
</style>
